import { defineComponent, PropType, ref } from 'vue';
import { Icon } from './Icon';
import s from './Overlay.module.scss';
export const Overlay = defineComponent({
    props: {
        onClose: Function as PropType<() => void>
    },
    setup: (props, context) => {
        const close = () => {
            props.onClose?.()

        }
        return () => (
            <div>
                <div class={s.mask} onClick={close}></div>
                <div class={s.overlay}>
                    <section class={s.section}>
                        <h2>未登录 </h2>
                        <p>点击这里这里登录</p>
                    </section>
                    <ul>
                        <li>
                            <Icon name="charts" />
                            <span>统计图标</span>
                        </li>
                        <li>
                            <Icon name="exports" />
                            <span>导出数据</span>
                        </li>
                        <li>
                            <Icon name="clocks" />
                            <span>记账提醒</span>
                        </li>
                    </ul>

                </div>
            </div>
        )
    }
})




export const OverlayIcon = defineComponent({
    props: {
        name: {
            type: String as PropType<'add' | 'pig'>
        }
    },
    setup: (props, context) => {
        const OverlayVisible = ref(false)
        const onClickMenu = () => {
            OverlayVisible.value = !OverlayVisible.value
        }
        return () => <>
            < Icon name="nav" class={s.Icon} onClick={onClickMenu} />
            {OverlayVisible.value && //OverlayVisible存在就展示Overlay
                <Overlay onClose={() => OverlayVisible.value = !OverlayVisible.value} />}

        </>
    }
})